import { useState } from "react"

const State = () => {
  // 函数组件中需要使用 useState 钩子
  let result = useState(1)
  // let count = result[0] // 只读
  // let setCount = result[1] // 调用后重新渲染
  let [count, setCount] = result
  const [user, setUer] = useState({name:'张三',age:12})
  const [arr, setArr] = useState([1,2,3])


  const add = (e) => {
    // count += e
    setCount(old => old + e)
  }
  const textChange = () => {
    setUer(()=>{
      return {...user, name:'李四'}}
    )
  }
  const arrChange = () => {
    // setArr([...arr,arr[0]=9])
  }
  let arrList = arr.map((p,i) => <li key={i}>{p}</li>)
  return <div>
    <h2>{count}/{user.name}-{user.age}/{arrList}</h2>
    <button onClick={()=>{add(2)}}>+</button>
    <button onClick={textChange}>修改文字</button>
    <button onClick={arrChange}>修改数组</button>
  </div>
}

export default State